<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/government/rectification' }"
      >质量评估标准</el-breadcrumb-item>
      <el-breadcrumb-item>机构自评</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div class="obj_bt_box">
              <div class="box_label">
                16项基础标准指标：<span
                  style="color: skyblue; margin-left: 10px; cursor: pointer"
                  @click="isShow1 = !isShow1"
                >收起</span>
              </div>
              <div v-if="isShow1" class="box_value">
                <el-table :data="tableData" style="width: 100%" border>
                  <el-table-column
                    prop="indexName"
                    label="指标"
                    align="center"
                  />
                  <el-table-column prop="name" label="政府评估" align="center">
                    <template slot-scope="scope">
                      {{
                        option.find((item) => item.value === scope.row.isPass)
                          .label
                      }}
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <div v-for="(item, index) in assessmentList" :key="index">
                  <div>{{ item.name }}</div>
                  <div />
                </div> -->
              </div>
              <div v-else style="height: 100px; width: 100px" />
            </div>
            <div class="obj_bt_box">
              <div class="box_label">整改模块：</div>
              <div class="box_value">
                <my-table-report
                  ref="myTableReport"
                  :my-array-span-method="myArraySpanMethod"
                  :table-data="tableData1"
                  :table-header="tableHeader"
                  :operation="operation"
                />
              </div>
            </div>
            <div class="obj_item" style="width: 100%; display: flex">
              整改原因：<span
                v-if="outDataObj"
                v-html="outDataObj.correctionReason"
              />
            </div>
            <div class="obj_item" style="width: 100%; display: flex">
              附件：
              <el-upload
                v-if="outDataObj"
                style="position: relative; min-height: 148px"
                action="/api/system/upload"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="outDataObj.fileShow"
                disabled
              >
                <i slot="default" class="el-icon-plus" />
                <div slot="file" slot-scope="{ file }">
                  <img
                    style="height: 148px"
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  >
                  <span
                    class="text"
                    style="
                      display: block;
                      max-width: 148px;
                      word-break: break-all;
                    "
                  >{{ file.name }}</span>
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download" />
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">园所处理</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div class="obj_bt_box">
              <div class="box_label">处理内容：</div>
              <div class="box_value" style="display: flex">
                <el-input
                  v-model="formSub.content"
                  placeholder="请输入"
                  type="textarea"
                  style="width: 80%"
                />
              </div>
            </div>
            <div class="obj_bt_box" style="display: flex; align-items: center">
              <div class="box_label">附件：</div>
              <div class="box_value">
                <el-upload
                  style="position: relative; min-height: 148px"
                  action="/api/system/upload1"
                  list-type="picture-card"
                  :auto-upload="true"
                  :file-list="fileListShow"
                  :on-success="handleFileSuccess"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{ file }">
                    <img
                      style="height: 148px"
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <div
                      class="text"
                      style="
                        display: block;
                        max-width: 148px;
                        word-break: break-all;
                      "
                    >
                      {{ file.name ? file.name : "" }}
                    </div>
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div
      class="cad-box flex-card"
      style="margin: 20px 0; justify-content: space-evenly"
    >
      <el-button
        type="warning"
        @click="handleProblemRectificationUpdateProblem"
      >提 交</el-button>
    </div>
  </div>
</template>

<script>
import MyTableReport from './components/myTableReport'
import { mapGetters } from 'vuex'
import { ListIndexAndTemplate, problemRectificationUpdateProblem } from './api'
import fileImage from '@/assets/file_image.png'
export default {
  components: { MyTableReport },
  data () {
    return {
      formSub: {
        content: '',
        file: []
      },
      isShow1: true,
      isShow2: true,
      textarea: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      dataObj: {},
      outDataObj: {},
      tableHeader: [
        { label: `一级指标`, prop: 'firstIndicator' },
        { label: `一级指标分值`, prop: 'firstIndicatorScore' },
        { label: `二级指标`, prop: 'secondIndicator' },
        { label: `二级指标分值`, prop: 'secondIndicatorScore' },
        { label: `三级指标`, prop: 'thirdIndicator' },
        { label: `三级指标分值`, prop: 'thirdIndicatorScore' },
        { label: `指标内容`, prop: 'indicatorContent' },
        { label: `指标分值`, prop: 'indicatorScore' },
        { label: `评估方式`, prop: 'evaluationMethod' },
        { label: `参考依据`, prop: 'referenceBasis' },
        {
          label: `评估方式与信息采集`,
          prop: 'informationCollection',
          width: '140'
        },
        { label: `解释说明`, prop: 'explanation' }
      ],
      operation: [{ label: `政府评分`, prop: 'govScore' }],
      // 状态（1上线，2下线，3草稿）
      option: [
        {
          label: '不通过',
          value: 0
        },
        {
          label: '通过',
          value: 1
        }
      ],
      assessmentList: [],
      tableData: [],
      tableData1: []
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleListIndexAndTemplate()
  },
  mounted () {},
  methods: {
    myArraySpanMethod (row, column, rowIndex, columnIndex) {
      console.log('>>>>>', this.myMapData, columnIndex, rowIndex)
      return this.myMapData[rowIndex][columnIndex]
    },
    async handleProblemRectificationUpdateProblem () {
      console.log(this.fileList, 'this.fileList')
      await problemRectificationUpdateProblem({
        areaId: this.curArea.id,
        evaluationPlanId: this.idS,
        processingContent: this.formSub.content,
        uploadFile: JSON.stringify(this.fileList),
        location: this.curArea.location,
        staffId: this.user.id
      })
      this.$message.success('提交成功')
      this.$router.push('/government/rectification')
    },
    async handleListIndexAndTemplate () {
      const res = await ListIndexAndTemplate({
        evaluationPlanId: this.idS,
        areaId: this.curArea.id
      })
      this.outDataObj = res.ProblemRectification
      if (res.ProblemRectification) {
        this.formSub.content = res.ProblemRectification.processingContent
      }

      if (res.ProblemRectification) {
        this.fileList = res.ProblemRectification
          ? JSON.parse(res.ProblemRectification.uploadFile)
            ? res.ProblemRectification.uploadFile
            : []
          : []
        // this.fileListShow = this.fileList.map((item) => {
        //   let fileExtension = item.url.split(".").pop(); // 获取文件后缀
        //   fileExtension = fileExtension.toLowerCase(); // 将后缀转换为小写，以便比较
        //   if (["jpg", "jpeg", "png", "gif", "svg"].includes(fileExtension)) {
        //     item.uploadFile = item.url;
        //     return item;
        //   } else {
        //     return {
        //       uid: item.uid,
        //       name: item.name,
        //       url: this.fileImage,
        //       uploadFile: item.url,
        //     };
        //   }
        // });
      }
      if (res.ProblemRectification) {
        this.outDataObj.file = JSON.parse(res.ProblemRectification.file)
        this.outDataObj.fileShow = this.outDataObj.file.map((item) => {
          if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(item.url)) {
            item.uploadFile = item.url
            return item
          } else {
            return {
              uid: item.uid,
              name: item.name,
              url: this.fileImage,
              uploadFile: item.url
            }
          }
        })
      }

      this.tableData = res.indexEvaluateList
      this.tableData1 = res.thirdIndicators
      this.myMapData = this.getMerge(this.tableData1, this.tableHeader)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // if (
      //   columnIndex === 0 ||
      //   columnIndex === 1 ||
      //   columnIndex === 2 ||
      //   columnIndex === 3
      // ) {
      //   if (rowIndex === 0) {
      //     return {
      //       rowspan: 5,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    getMerge (myData, myHeader) {
      var map = new Array(myData.length)
        .fill()
        .map(() => new Array(myHeader.length).fill().map(() => [1, 1]))

      let number = 1
      let number2 = 1
      let numberIndex = 0
      let numberIndex2 = 0 //
      for (let i = 0; i < myData.length; i++) {
        const myI = i + 1
        // 获取一级指标的合并
        if (myI < myData.length && myData[i].firstId === myData[myI].firstId) {
          number++
          map[i][0] = [0, 0]
          map[i][1] = [0, 0]
        } else {
          if (number === 1) {
            map[i][0] = [1, 1]
            map[i][1] = [1, 1]
          } else {
            // 翻转过去
            map[numberIndex][0] = [number, 1]
            map[numberIndex][1] = [number, 1]
            number = 1
            numberIndex = i + 1
            map[i][0] = [0, 0]
            map[i][1] = [0, 0]
          }
        }
        // 获取二级指标的合并
        if (
          myI < myData.length &&
          myData[i].secondId === myData[myI].secondId
        ) {
          number2++
          map[i][2] = [0, 0]
          map[i][3] = [0, 0]
        } else {
          if (number2 === 1) {
            map[i][2] = [1, 1]
            map[i][3] = [1, 1]
          } else {
            // 填入
            map[numberIndex2][2] = [number2, 1]
            map[numberIndex2][3] = [number2, 1]
            number2 = 1
            numberIndex2 = i + 1
            map[i][2] = [0, 0]
            map[i][3] = [0, 0]
          }
        }
      }
      return map
    },
    handleRemove (file) {
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
      this.fileListShow = this.fileListShow.filter(
        (item) => item.uid !== file.uid
      )
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.uploadFile, '_blank')
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList) {
      this.fileList.push({
        uid: file.uid,
        name: response.data.originalName,
        url: response.data.url,
        uploadFile: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.originalName,
          url: response.data.url,
          uploadFile: response.data.url
        })
      } else {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.originalName,
          url: this.fileImage,
          uploadFile: response.data.url
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  border: 1px solid #c0ccda;
  border-radius: 10px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
  height: auto !important;
}
::v-deep .el-upload--picture-card {
  position: absolute;
  right: -148px;
  top: 0;
}
::v-deep .el-upload-list--picture-card {
  display: flex !important;
}
::v-deep .obj_item .el-upload {
  display: none;
}
::v-deep .el-radio {
  margin: 0px 70px;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 50px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
